<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 新增部分 -->
        <header>
          <span style="font-size:12px;color:pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            class="addbtn"
            @click="addQuestion"
            >新增试题</el-button
          >
        </header>
        <!-- 筛选框 -->
        <nav>
          <el-form ref="searchForm" :model="searchList" class="searchForm">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="学科" label-width="70px">
                  <el-select
                    v-model="searchList.subjectID"
                    placeholder="请选择"
                    class="searchinput"
                    @change="getData"
                  >
                    <el-option
                      v-for="item in subjectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" label-width="70px">
                  <el-select
                    v-model="searchList.catalogID"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in catalogList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" label-width="70px">
                  <el-select
                    v-model="searchList.tags"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in tagsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" label-width="70px">
                  <el-input
                    v-model="searchList.keyword"
                    placeholder="根据题干搜索"
                    class="searchinput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="试题类型" label-width="70px">
                  <el-select
                    v-model="searchList.questionType"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" label-width="70px">
                  <el-select
                    v-model="searchList.difficulty"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" label-width="70px">
                  <el-select
                    v-model="searchList.direction"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in directionList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" label-width="70px">
                  <el-select
                    v-model="searchList.creatorID"
                    placeholder="请选择"
                    class="searchinput"
                  >
                    <el-option
                      v-for="item in creatorList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col> </el-row
            ><el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="题目备注" label-width="70px">
                  <el-input
                    v-model="searchList.remarks"
                    class="searchinput"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" label-width="70px">
                  <el-input
                    v-model="searchList.shortName"
                    class="searchinput"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="城市"
                  label-width="70px"
                  class="searchcity"
                >
                  <div class="city" style="display:flex">
                    <el-select
                      v-model="searchList.province"
                      placeholder="请选择"
                      @change="getCity"
                    >
                      <el-option
                        v-for="item in provinceList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                    <el-select v-model="searchList.city" placeholder="请选择">
                      <el-option
                        v-for="item in cityList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <div class="searchbtn">
                  <el-button @click="reset">清除</el-button>
                  <el-button type="primary" @click="gosearch">搜索</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </nav>
        <!-- tab栏 -->
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="tabClick"
          class="mytab"
        >
          <el-tab-pane label="全部" name="first"> </el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
        </el-tabs>
        <!-- 提示总条数 -->
        <el-alert
          :title="'数据一共' + params.counts + '条'"
          type="info"
          :closable="false"
          show-icon
          class="alertMessage"
        >
        </el-alert>
        <!-- 列表 -->
        <el-table :data="params.items" tyle="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template #default="{row}">
              {{ formQuestion(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="250">
            <template #default="{row}">
              <p v-html="row.question"></p>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="170">
            <template #default="{ row }">
              {{ formTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template #default="{row}">
              {{ formDiff(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template #default="{row}">
              {{ formState(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="300">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="showSeeDialog(scope.row.id)"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="showCheckDialog(scope.row.id)"
                :disabled="
                  !(scope.row.chkState === 0) || scope.row.publishState === 1
                "
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1"
                @click="changeQuestion(scope.row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="
                  putaway({
                    id: scope.row.id,
                    publishState: 1
                  })
                "
                v-if="scope.row.publishState === 0"
                >上架</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="
                  putaway({
                    id: scope.row.id,
                    publishState: 0
                  })
                "
                v-else
                >下架</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1"
                @click="delQuestion(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页   -->
        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[2, 5, 7, 10]"
            :page-size="Number(params.pagesize)"
            :current-page="Number(params.page)"
            :total="params.counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 预览窗口 -->
      <questions-preview
        :is-preview="SeeDialog"
        @close-preview="SeeDialogClose"
        :cur-id="problemId"
      ></questions-preview>
      <!-- 审核窗口 -->
      <questions-check
        :CheckDialog="CheckDialog"
        @close-checkdialog="CheckDialogClose"
        :CheckId="CheckId"
      />
    </div>
  </div>
</template>

<script>
import { choice, choicePublish, remove } from "@/api/hmmm/questions";
import { simple } from "@/api/hmmm/subjects";
import { simple as simpleDirectorys } from "@/api/hmmm/directorys";
import { simple as simpleTags } from "@/api/hmmm/tags";
import { simple as simpleUser } from "@/api/base/users";
import { provinces, citys } from "@/api/hmmm/citys";
import dayjs from "dayjs";
import questionsPreview from "../components/questions-preview.vue";
import questionsCheck from "../components/questions-check.vue";
export default {
  components: {
    questionsPreview,
    questionsCheck
  },
  data() {
    return {
      activeName: "first",
      // 当前页数
      params: {
        items: [],
        page: 1,
        pagesize: 5,
        pages: 0,
        counts: 0
      },
      // tab栏切换
      myCheckState: -1,
      // 预览窗口
      SeeDialog: false,
      // 试题id
      problemId: 0,
      // 审核栏窗口
      CheckDialog: false,
      // 审核 id
      CheckId: 0,
      // 审核按钮状态
      checkdisable: true,
      // 搜索列表
      searchList: {
        subjectID: "",
        catalogID: "",
        tags: "",
        keyword: "",
        questionType: "",
        difficulty: "",
        direction: "",
        creatorID: "",
        remarks: "",
        shortName: "",
        province: "",
        city: ""
      },
      // 学科列表
      subjectList: [],
      // 录入人列表
      userList: [],
      catalogList: [],
      tagsList: [],
      questionTypeList: [
        {
          value: 1,
          label: "单选"
        },
        {
          value: 2,
          label: "多选"
        },
        {
          value: 3,
          label: "简单"
        }
      ],
      difficultyList: [
        {
          value: 1,
          label: "简单"
        },
        {
          value: 2,
          label: "一般"
        },
        {
          value: 3,
          label: "困难"
        }
      ],
      directionList: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他"
      ],
      creatorList: [],
      cityList: [],
      provinceList: []
    };
  },
  methods: {
    tabClick(tab) {
      if (tab.index === "0") {
        this.fetchList();
      } else {
        this.myCheckState = tab.index - 1;
        this.fetchList({ chkState: this.myCheckState });
      }
    },
    // 渲染列表
    async fetchList(value) {
      const res = await choice({ ...this.params, ...value });
      this.params = { ...res.data };
    },
    // 题型
    formQuestion(value) {
      const TYPE = {
        1: "单选",
        2: "多选",
        3: "简答"
      };
      return TYPE[value];
    },
    formTime(value) {
      return dayjs(value).format("YYYY-MM-DD hh-mm-ss");
    },
    formDiff(value) {
      const TYPE = {
        1: "简单",
        2: "一般",
        3: "困难"
      };
      return TYPE[value];
    },
    formState(value) {
      const TYPE = {
        0: "待审核",
        1: "已审核",
        2: "已拒绝"
      };
      return TYPE[value];
    },
    // 提示信息
    alertTitle() {
      return `数据一共${this.params.counts}条`;
    },
    // 分页
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.params.page = 1;
      this.fetchList();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.fetchList();
    },
    // 预览窗口
    showSeeDialog(id) {
      this.SeeDialog = true;
      this.problemId = id;
    },
    SeeDialogClose() {
      this.SeeDialog = false;
    },
    // 审核窗口
    CheckDialogClose() {
      this.CheckDialog = false;
      this.fetchList(this.dealEmptyParam(this.searchList));
    },
    showCheckDialog(id) {
      this.CheckDialog = true;
      this.CheckId = id;
    },
    // 审核按钮状态
    checkdisabled(value) {
      if (value === "0") {
        return true;
      } else {
        return false;
      }
    },
    //  上架和下架
    putaway(data) {
      this.$confirm("您确认上架这道题目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(data);
          await choicePublish(data);
          this.$message({
            type: "success",
            message: "上架成功!"
          });
          this.fetchList(this.dealEmptyParam(this.searchList));
        })
        .catch(() => {});
    },
    // 删除
    async delQuestion(id) {
      this.$confirm("您确认删除这道题目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await remove({ id });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.fetchList(this.dealEmptyParam(this.searchList));
        })
        .catch(() => {});
    },
    // 获取学科列表
    async getsubjectList() {
      const res = await simple();
      this.subjectList = res.data;
    },
    //  获取二级目录
    async getcatalog() {
      const ID = this.searchList.subjectID.toString();
      const res = await simpleDirectorys({ subjectID: ID });
      this.catalogList = res.data;
    },
    // 获取标签
    async getTags() {
      const ID = this.searchList.subjectID.toString();
      const res = await simpleTags({ subjectID: ID });
      this.tagsList = res.data;
    },
    // 调用目录和标签
    getData() {
      this.getcatalog();
      this.getTags();
    },
    async getCreator() {
      const res = await simpleUser();
      this.creatorList = res.data;
    },
    // 过滤数组
    dealEmptyParam(params) {
      Object.keys(params).forEach(key => {
        const value = params[key];
        if (value === "" || value === null || value === undefined)
          delete params[key];
      });
      return params;
    },
    // 筛选
    gosearch() {
      const searchData = this.dealEmptyParam(this.searchList);
      this.fetchList(searchData);
    },
    // 清楚
    reset() {
      this.searchList = {
        subjectID: "",
        catalogID: "",
        tags: "",
        keyword: "",
        questionType: "",
        difficulty: "",
        direction: "",
        creatorID: "",
        remarks: "",
        shortName: "",
        province: "",
        city: ""
      };
    },
    // 获取城市
    getProvinces() {
      this.provinceList = provinces();
    },
    getCity() {
      this.cityList = citys(this.searchList.province);
    },
    // 新增试题
    addQuestion() {
      this.$router.push("/questions/new");
    },
    // 修改试题
    changeQuestion(id) {
      this.$router.push({
        path: "/questions/new",
        query: { id }
      });
    }
  },
  mounted() {
    this.fetchList();
    this.getsubjectList();
    this.getCreator();
    this.getProvinces();
  }
};
</script>

<style scoped>
div /deep/ .alertMessage {
  margin-bottom: 18px;
}
.page {
  float: right;
  margin: 18px 0px;
}
.addbtn {
  float: right;
}
.mytab {
  margin-top: 20px;
}
.searchForm {
  margin-top: 45px;
}
.searchbtn {
  float: right;
}
</style>
